<!-- 搜索选择类信息修改页面 -->

<template>
	<focus-body mode="auto" bg="#FFFFFF">
		<!-- 顶部输入框区域 -->
		<focus-box width="750" height="140">
			<!-- 悬浮容器 -->
			<focus-box 
				top="0" 
				left="0" 
				bg="white"
				mode="row" 
				width="750" 
				height="140" 
				align="center"
				justify="center" 
				position="fixed" 
			>
				<!-- 输入框容器 -->
				<focus-box 
					bg="info" 
					mode="row" 
					width="690" 
					height="80" 
					radius="10"
					align="center"
					justify="start" 
					bgscheme="light" 
				>
					<!-- 搜索图标容器 -->
					<focus-box 
						mode="col" 
						width="80" 
						height="80" 
						align="center"
						justify="center" 
					>
						<!-- 放大镜图标 -->
						<image 
							class="myCenter-searchCheck-img-glass" src="/static/img/myCenter/search.png"
						/>
					</focus-box>
					<!-- 输入框 -->
					<input
						type="text"
						confirm-type="search"
						class="myCenter-searchCheck-input"
						placeholder-class="myCenter-searchCheck-placeholder"
						:auto-focus="true"
						v-model="inputInfo.value"
						:placeholder="inputInfo.placeholder"
						@confirm="searchKeyReq"
					/>
					<!-- 清除按钮容器 -->
					<focus-box 
						v-if="inputInfo.value"
						mode="col" 
						width="80" 
						height="80" 
						justify="center" 
						align="center"
						@click="clearBtnClick"
					>
						<!-- 放大镜图标 -->
						<image 
							src="/static/img/myCenter/close.png"
							class="myCenter-searchCheck-img-clear" 
						/>
					</focus-box>
				</focus-box>
			</focus-box>
		</focus-box>
		<!-- 搜索结果列表 循环容器 -->
		<view 
			v-for="(item,index) in search.list" 
			:key="index"
		>
			<!-- 一个选择块 -->
			<focus-box 
				width="750" 
				mode="col" 
				justify="start" 
				align="center"
			>
				<!-- 间隔线 -->
				<focus-line 
					length="690" 
					color="info-light"
				></focus-line>
				<!-- 内容容器 -->
				<focus-box 
					mode="col" 
					bg="white" 
					width="750" 
					align="start"
					justify="start" 
					bgscheme="hover"
					:padding="[40,30]"
					@click="searchItemClick(item)"
				>
					<!-- 显示文字 -->
					<focus-text 
						size="30" 
						color="content" 
						:text="item.name"
					></focus-text>
				</focus-box>
			</focus-box>
		</view>
	</focus-body>
</template>

<script>
	// 引入接口请求文件
	import request from '@/pagesB/common/js/request/userInfo.js';
	import requestAll from "@/pagesB/common/js/request/allRequest.js"
	/**
	 * 搜索选择类信息修改页面
	 * @description 搜索选择类信息修改页面，以下为页面URL传参
	 * @property {String} type = [project|company] 信息具体修改项
	 *   @value project 所属项目修改
	 *   @value company 工作单位修改
	 * @property {String} from = [center|learning] 打开前的源页面，默认：center
	 *   @value center 从个人中心来
	 *   @value learning 从创建学习组来
	 */
	export default {
		// 页面数据
		data() {
			return {
				
				// 传递参数
				send: {
					type: '',
					from: 'center',
				},
				
				// 状态信息
				state: {
					isFirst: true, // 是否是第一次打开页面
				},
				
				// 定时器对象
				timer: {
					search: null,
				},
				
				// 输入框信息
				inputInfo: {
					value: '', // 输入字符串
					placeholder: '', // 占位字符
				},
				
				// 搜索列表信息
				search: {
					// 具体要修改的项标识
					tag: '',
					// 列表数据
					list: [],
				},
			}
		},
		
		// 数据监听
		watch: {
			// 输入框输入文本 改变了
			'inputInfo.value': {
				handler(newV, oldV){
					// 如果为字符串 才执行
					if (typeof(newV)=="string" && newV.length>0)
					{
						// 如果定时器对象存在，那么先销毁
						if (this.timer.search) { clearTimeout(this.timer.search); }
						// 定义定时器
						this.timer.search = setTimeout(()=>{
							// 重新请求 搜索关键字数据列表
							this.searchKeyReq();
						}, 1000);
					}
					// 否则清空数据列表
					else if (this.state.isFirst == false) {
						// 清空备选项列表
						this.search.list = [];
						// 修改用户信息
						if (this.inputInfo.value) {
							this.userInfoEdit(0);
						}
					}
				},
				immediate: true,
			}
		},
		
		// 页面创建完成
		onLoad(options) {
			// 传递数据 赋值
			this.send = Object.assign(this.send, options);
			// 初始显示内容 赋值
			if (this.send.value && this.send.value!='null') {
				this.inputInfo.value = decodeURIComponent(this.send.value);
			}
			// 从个人中心来
			if (this.send.from == 'center'){
				// 所属项目修改
				if (this.send.type == 'project')
				{
					// 设置页面标题
					uni.setNavigationBarTitle({ title: '所属项目修改' });
					// 输入框占位字符
					this.inputInfo.placeholder = '搜索所属项目';
					// 具体要修改的项标识
					this.search.tag = 'project_id';
				}
				// 工作单位修改
				else if (this.send.type == 'company')
				{
					// 设置页面标题
					uni.setNavigationBarTitle({ title: '工作单位修改' });
					// 输入框占位字符
					this.inputInfo.placeholder = '搜索工作单位';
					// 具体要修改的项标识
					this.search.tag = 'work_id';
				}
			}else if (this.send.from == 'learning'){// 从创建学习组页面来
				// 所属项目修改
				if (this.send.type == 'project')
				{
					// 设置页面标题
					uni.setNavigationBarTitle({ title: '选择所属项目' });
					// 输入框占位字符
					this.inputInfo.placeholder = '搜索所属项目';
				}
				// 工作单位修改
				else if (this.send.type == 'company')
				{
					// 设置页面标题
					uni.setNavigationBarTitle({ title: '选择工作单位' });
					// 输入框占位字符
					this.inputInfo.placeholder = '搜索工作单位';
				}
			}else if(this.send.from =='infoConfirm'){
				uni.setNavigationBarTitle({ title: '工作单位修改' });
			}
		},
		
		// 页面显示
		onShow() {
			// 初次打开页面标识
			this.state.isFirst = false;
		},
		// 页面销毁
		onUnload() {
			// 如果定时器对象存在，那么先销毁
			if (this.timer.search) { clearTimeout(this.timer.search); }
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			// ============================================ 元素事件
			// 输入清除按钮 点击
			clearBtnClick() {
				// 清空输入内容
				this.inputInfo.value = '';
			},
			
			// 搜索列表项 点击
			searchItemClick(itemC) {
				// 从个人中心来
				if (this.send.from == 'center'){
					// 取出点击项的id
					var str_id = itemC.id;
					// 修改用户信息
					this.userInfoEdit(str_id, ()=>{
						// 修改成功，页面返回
						uni.navigateBack();
					});
				}else if (this.send.from == 'learning'){// 从创建学习组页面来
					// 回调数据封装
					var data_back = {
						id: itemC.id,
						value: itemC.name
					};
					// 所属项目修改
					if (this.send.type == 'project'){
						// 返回上一页
						uni.navigateBack();
						// 数据全局监听器回复
						uni.$emit('pages_learning_creat_projectCheck', data_back);
					}else if (this.send.type == 'company'){// 工作单位修改
						// 返回上一页
						uni.navigateBack();
						// 数据全局监听器回复
						uni.$emit('pages_learning_creat_companyCheck', data_back);
					}
				}else if(this.send.from == 'infoConfirm'){
					uni.$emit('pages_infoComfirm', itemC);
					uni.navigateBack();
				}
			},
			
			
			// ============================================ 接口请求
			// 搜索关键字数据列表
			searchKeyReq() {
				// 如果为字符串 才执行
				if (typeof(this.inputInfo.value)=="string" && this.inputInfo.value.length>0){
					// 1. 所属项目搜索
					if (this.send.type == 'project')
					{
						// 所属项目列表请求
						request.projectList({
							data: {
								name: this.inputInfo.value, // 搜索关键字
							},
							success: (res) => {
								// console.log('===== 所属项目数据列表：', res);
								// 所属项目列表 数据赋值
								this.search.list = res.list ? res.list : [];
							},
						});
					}
					
					// 2. 工作单位搜索
					if (this.send.type == 'company')
					{
						// 工作单位列表请求
						request.companyList({
							data: {
								name: this.inputInfo.value, // 搜索关键字
							},
							success: (res) => {
								// 工作单位列表 数据赋值
								this.search.list = res.list ? res.list : [];
							},
						});
					}
					//安全月竞赛信息确认页面
					if(this.send.from =='infoConfirm'){
						requestAll.getCompanyList({
							data:{name:this.inputInfo.value},
							success:(res)=>{
								this.search.list=res?res.map(item=>{
									return {
											...item,
											name:item.name+`  (${item.type=="SG"?'施工单位':item.type=="JL"?"监理单位":item.type=="JS"?'建设单位':item.type=="ZG"?"主管单位":""})`
										}
								}):[]
							},
							fail:(err)=>{
								this.$u.toast('搜索失败');
							}
						})
					}
				}
				// 否则清空数据列表
				else {
					this.search.list = [];
				}
				
			},
			
			// 修改用户信息，参数：idC-要修改为的id
			userInfoEdit(idC, callback) {
				// 修改信息请求调用
				request.userInfoEdit({
					data: {
						field_name: this.search.tag, // 具体要修改的项标识
						value: idC, // 要修改为的显示结果
					},
					success: (res) => {
						// 执行成功回调
						if (callback) { callback(); }
					},
				});
				
			},
			
		},
		
	}
</script>


<style>
	/* 输入框样式 */
	.myCenter-searchCheck-input{
		width: 530rpx; height: 80rpx;
		font-size: 30rpx; color: #2F2F2F;
	}
	/* 输入框占位符样式 */
	.myCenter-searchCheck-placeholder{
		font-size: 30rpx; color: #AEAEAE;
	}
	/* 放大镜图片 */
	.myCenter-searchCheck-img-glass{ width: 34rpx; height: 34rpx; }
	/* 清除按钮图片 */
	.myCenter-searchCheck-img-clear{ width: 36rpx; height: 36rpx; }
</style>